<template>
  <div class="user-avatar-dropdown">
    {{getUserCode()}}
    <Dropdown @on-click="handleClick">
      <Avatar icon="ios-person" />
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <template #list>
      <DropdownMenu>
        <DropdownItem name="message">
          消息中心
          <Badge style="margin-left: 10px"></Badge>
        </DropdownItem>
        <DropdownItem name="logout">退出登录</DropdownItem>
      </DropdownMenu>
      </template>
    </Dropdown>
  </div>
</template>
<script setup>
import './user.less'
import {useRouter} from 'vue-router'
import {getUserInfoLocal} from "@/libs/util.js";
import {logout as logoutApi} from '@/module-base/api/login.js'

const router=useRouter()
const props = defineProps({
  userAvatar: {
    type: String,
    default: ''
  },
})

import {useLoginStore} from "@/module-base/stores/login.js";
const {handleLogOut,userInfo} = useLoginStore()

function getUserCode() {
  // debugger
  if(userInfo && Object.keys(userInfo).length>0){
    return userInfo.userCode || userInfo.userName
  }
  return getUserInfoLocal().userCode
}
async function logout() {
  // const userInfo=getUserInfo()

  const res=await logoutApi(userInfo)
  if (res.success){
    await handleLogOut()
  }
  router.push({
    name: 'login'
  })
}

function message() {
  router.push({
    name: 'message_page'
  })
}
function handleClick(name) {
  // router.push({
  //   name: 'login'
  // })
  switch (name) {
    case 'logout':
      logout()
      break
    case 'message':
      message()
      break
  }
}
</script>
